<template>
    <div class="tag-item" :class="[theme, textTheme]">
        <span><slot /></span>
    </div>
</template>
<script setup>
import { computed } from "vue"
const props = defineProps({
    type: {
        type: String,
        default: ''
    },
    isText: Boolean
})
/**
 * theme
 */
const theme = computed(() => props.type ? `tag-item__${props.type}` : '')
/**
 * theme
 */
 const textTheme = computed(() => props.isText ? 'is-text' : "")
</script>
<style lang="scss" scoped>
.tag-item {
    height: 22px;
    padding: 0 10px;
    border: 1px solid #ccc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    span {
        line-height: 1;
        font-size: 12px;
    }
    &.is-text {
        border: none;
        background: none;
        padding: 0;
    }
}
.tag-item__default {
    border-color: #CCCCCC;
    background-color: #F1F1F1;
    color: #999999;
}
.tag-item__warning {
    border-color: #FFB012;
    background-color: #FEF6E8;
    color: #FFB012;
}
.tag-item__success {
    border-color: #3ABC3E;
    background-color: #ECF9EF;
    color: #3ABC3E;
}
.tag-item__error {
    border-color: #F05050;
    background-color: #FFE9ED;
    color: #F05050;
}

</style>